<template>
  <div class="line-box">
    <div class="menu-box"><merge routePath="home" /></div>
    <div class="product-list"><merge-product routePath="home" /></div>
  </div>

  <div class="line-box">
    <div class="menu-box"><sandstorm routePath="home" /></div>
    <div class="product-list"><sandstorm-product routePath="home" /></div>
  </div>

  <div class="line-box">
    <div class="menu-box"><forcast routePath="home" /></div>
    <div class="product-list"><forcast-product routePath="home" /></div>
  </div>
</template>

<script setup lang="ts">
  import Merge from '../merge/merge.vue';
  import MergeProduct from '../merge/merge-product.vue';

  import Sandstorm from '../sandstorm/sandstorm.vue';
  import SandstormProduct from '../sandstorm/sandstorm-product.vue';

  import Forcast from '../forcast/forcast.vue';
  import ForcastProduct from '../forcast/forcast-product.vue';
</script>

<style lang="less" scoped>
  .line-box {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    width: 100%;
  }

  .menu-box {
    width: 366px;
    flex-shrink: 0;
  }

  .product-list {
    flex: 1;
    overflow-x: hidden;
  }
</style>
